<div class="dispatch-main-container">
  <div class="center-panel">
    <div class="weather-wrap">
      <app-weather-panel></app-weather-panel>
    </div>
    <div class="button-group">
<!--      <nz-badge>
        <button class="btn-4" nz-button nzType="default">指令调度</button>
      </nz-badge>-->

      <nz-badge [nzCount]="applyAmount">
        <button class="btn-1" nz-button nzType="default" (click)="applyModalShow = true">加减水调度</button>
      </nz-badge>

      <nz-badge>
        <button class="btn-2" nz-button nzType="default" (click)="jskllModalShow=true">干渠进水口流量</button>
      </nz-badge>

      <nz-badge>
        <button class="btn-3" nz-button nzType="default" (click)="recordModalShow=true">水量调度记录</button>
      </nz-badge>

      <nz-badge>
        <button class="btn-4" nz-button nzType="default" (click)="dutyRecordModalShow=true">交接班记录</button>
      </nz-badge>
      <!--
     <nz-badge>
       <button class="btn-4" nz-button nzType="default" (click)="tableModalShow = true">切换表格</button>
     </nz-badge>
     -->
    </div>

    <div class="canvas-wrap" #canvasDiv>
      <div id="zx-canvas" style="width: 1700px; height: 700px;"></div>

      <div class="gate-info" *ngIf="infoShow"  [ngStyle]="{

                 'top': hoverItem.top,
                 'left': hoverItem.left
                 }">
        <div class="blue">警戒水位：{{hoverItem.alertLevel}}m</div>
        <div>当前水位：{{hoverItem.waterLevel}}m</div>
        <div class="blue">限定流量：{{hoverItem.limitTraffic}}m³/s</div>
        <div>当前引水流量：{{hoverItem.flow}}m³/s</div>
      </div>
    </div>

    <div class="legends">
      <button nz-button nzType="default" class="btn-type1">引黄灌区</button>
      <button nz-button nzType="default" class="btn-type2">工业取水</button>
      <button nz-button nzType="default" class="btn-type2">生态用水</button>
      <button nz-button nzType="default" class="btn-type2">城乡生活</button>
    </div>
  </div>

  <div class="right-panel">
    <app-zx-panel></app-zx-panel>
  </div>

  <nz-modal
    nzClassName="dispatch-modal"
    nzWidth="1500"
    [(nzVisible)]="applyModalShow"
    [nzTitle]="'加减水记录'"
    [nzFooter]="null"
    (nzOnCancel)="applyModalShow=false">
    <app-dispatch-record></app-dispatch-record>
  </nz-modal>

  <nz-modal
    nzClassName="dispatch-modal"
    nzWidth="1500"
    [(nzVisible)]="recordModalShow"
    [nzTitle]="'水量调度记录'"
    [nzFooter]="null"
    (nzOnCancel)="recordModalShow=false">
    <app-water-record></app-water-record>
  </nz-modal>

  <nz-modal
    nzClassName="dispatch-modal"
    nzWidth="1300"
    [nzStyle]="{ top: '10px' }"
    [(nzVisible)]="dutyRecordModalShow"
    nzTitle="交接班记录"
    [nzFooter]="null"
    (nzOnCancel)="dutyRecordModalShow=false">
    <app-work-change></app-work-change>

  </nz-modal>

  <nz-modal
    nzClassName="dispatch-modal"
    nzWidth="1200"
    [nzStyle]="{ top: '20px' }"
    [(nzVisible)]="jskllModalShow"
    (nzOnCancel)="jskllModalShow=false"
    [nzFooter]="null"
    nzTitle="干渠进水口流量">
    <div style="">
      <iframe [src]="gqjskllReportSrc" frameborder="0" style="height: 780px;width: 100%"></iframe>
    </div>
  </nz-modal>

</div>
